<template>
  <div class="wraper">
    <el-table :data="items" height="250" style="width: 100%" class="eltable">
      <el-table-column prop="name" label="地区" />
      <el-table-column prop="confirmAdd" label="新增确诊" />
      <el-table-column prop="confirm" label="累计确诊" />
      <el-table-column prop="heal" label="治愈" />
      <el-table-column prop="dead" label="死亡" />
    </el-table>
    <div ref="echartWrapper" id="echart2"></div>
  </div>
</template>
<script lang="ts" setup>
import type { TotalType } from '@/assets/types/Typs'
import {
  onMounted,
  watch,
  computed,
  onBeforeUnmount,
  ref,
} from 'vue'
import PieChart from '@/assets/utils/echarts2'
type Props = {
  items: TotalType[]
}
const props = defineProps<Props>()
// console.log('props', props.items)
const echartpieData = computed(() => {
  return JSON.parse(JSON.stringify(props.items))
})
let charts2 = <PieChart | null>null
const echartWrapper = ref<HTMLElement>()

watch(echartpieData, async (newVal, oldVal) => {
  let piedata = props.items.map(item => {
    return { value: item.confirm, name: item.name }
  })
  charts2?.initPieChart()
  charts2?.updateData(piedata)
})
onMounted(() => {
  charts2 = new PieChart(document.getElementById('echart2')!)
})
onBeforeUnmount(() => {
  charts2=null
})
</script>
<style lang="less" scoped>
.wraper {
  display: flex;
  flex-direction: column;
  flex: 1;
  .eltable {
    width: 100%;
    height: 30%;
  }
  #echart2 {
    width: 100%;
    height: 100%;
  }
}
</style>
